<template>
  <div class="p-4 enter-x" v-if="registerAndBindForm">
    <Form>
      <FormItem class="enter-x">
        <a-input size="large" placeholder="请输入手机号/邮箱" v-model:value="thirdLoginInfo.account" class="fix-auto-fill" autocomplete="off">
          <template #prefix>
            <Icon icon="ant-design:mobile-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
          </template>
        </a-input>
      </FormItem>

      <FormItem class="enter-x">
         <a-input-password size="large" placeholder="请输入密码" v-model:value="thirdLoginInfo.password" class="fix-auto-fill" autocomplete="off"/>
      </FormItem>
      
      <FormItem name="sms" class="enter-x">
        <CountdownInput 
          size="large" class="fix-auto-fill" 
          v-model:value="thirdLoginInfo.verifyCode" 
          placeholder="请输入验证码" 
          :enableManMachineVerify="true"
          :sendCodeApi="sendCodeApi"
        >
          <template #prefix>
            <Icon icon="ant-design:mail-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
          </template>
        </CountdownInput>
      </FormItem>
    </Form>

    <a-button type="primary" @click="thirdRegisterAndBindUser" :loading="thirdBindUserLoading" style="width: 100%">
      注册并绑定
    </a-button>
  </div>

  <!-- 第三方登录绑定手机号  -->
  <div class="p-4 enter-x" v-if="bindingAccountForm">
    <Form>
      <FormItem class="enter-x">
        <a-input size="large" placeholder="请输入手机号/邮箱" v-model:value="thirdLoginInfo.account" class="fix-auto-fill">
          <template #prefix>
            <Icon icon="ant-design:mobile-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
          </template>
        </a-input>
      </FormItem>
      <FormItem name="sms" class="enter-x">
        <CountdownInput 
          size="large" class="fix-auto-fill" 
          v-model:value="thirdLoginInfo.verifyCode" placeholder="请输入验证码"
          :enableManMachineVerify="true"
          :sendCodeApi="sendCodeApi"
        >
          <template #prefix>
            <Icon icon="ant-design:mail-outlined" :style="{ color: 'rgba(0,0,0,.25)' }"></Icon>
          </template>
        </CountdownInput>
      </FormItem>
    </Form>

    <a-button type="primary" @click="thirdBindExistUser" :loading="thirdBindUserLoading" style="width: 100%">
      登录并绑定账号
    </a-button>
  </div>

  <!-- <div class="text-center">
    <Button v-if="bindingAccountForm" type="link" size="small" @click="showRegisterAndBindAccount">
      没有账号? 点击注册
    </Button>
    <Button v-if="registerAndBindForm" type="link" size="small" @click="showBindAccount">
      已有账号? 点击绑定
    </Button>
  </div> -->

  <LoginSelect ref="loginSelectRef" @success="handleLoginSelectOk" />
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import {Button, Form, Input, Modal} from 'ant-design-vue';
import {CountdownInput} from '/@/components/CountDown';
import {useThirdLogin} from './useThirdLogin';
import {QuestionCircleFilled} from '@ant-design/icons-vue';
import {Icon} from '/@/components/Icon';
import LoginSelect from './LoginSelect.vue';

const FormItem = Form.Item;
  const InputPassword = Input.Password;
 
  export default defineComponent({
    name: 'ThirdBindUser',
    components: { 
      FormItem, Form, InputPassword, CountdownInput, Modal, QuestionCircleFilled, Icon, Button,
      LoginSelect
    },
    emits: ['loginSuccess', 'loginBefore'],
    setup() {
      return {
        ...useThirdLogin(),
      };
    },
  });
</script>
